<template>
	<view class="page-wraper">
		<!-- style="padding-top: 40px" -->
		<!-- <customNav title1="身份/公司认证" bgColor="#3957BF" backIconColor="white" ></customNav> -->
		<view class="page_title" style="background-color: #3957BF;">
			<view class="page_title_text">为保证平台信息真实有效，部分功能权限需要您认证后再使用</view>
		</view>
		<view class="contentViewBox">
			<cssArcBackground bgColor="#3957BF" height="30" />
			<view class="content">
				<view class="auth_list">
					<view @click="gotoAuth('person')" class="auth_card">
						<view class="auth_info">
							<image class="auth_icon" src="/static/auth_preson.png" mode=""
								style="height: 45px; width: 45px;"></image>
							<view class="auth_info_content">
								<text class="auth_title">身份认证</text>
								<text class="auth_instru">认证信息：有效期内的身份证正反面照片</text>
							</view>
						</view>

						<view class="auth_done" v-if="personAuth">
							<view class="text" style="-webkit-flex: 1;flex: 1;"></view>
							<view class="auth_done_state"> {{personAuthStatus}} </view>
						</view>
						<view class="auth_non" v-if="!personAuth" @click="gotoAuth('person')">
							<view class="auth_non_state">
								立即认证
							</view>
						</view>
					</view>
					<view @click="gotoAuth('company')" class="auth_card">
						<view class="auth_info">
							<image class="auth_icon" src="/static/auth_company.png" mode=""
								style="height: 45px; width: 45px;"></image>
							<view class="auth_info_content">
								<text class="auth_title">公司认证</text>
								<text class="auth_instru">认证信息：营业执照图片及其他基本信息</text>
							</view>
						</view>

						<view class="auth_done" v-if="companyAuth">
							<view class="text" style="-webkit-flex: 1;flex: 1;"></view>
							<view class="auth_done_state"> {{companyAuthStatus}} </view>
						</view>
						<view class="auth_non" v-if="!companyAuth" @click="gotoAuth('company')">
							<view class="auth_non_state">
								立即认证
							</view>
						</view>
					</view>
					<view v-if="userInfo.company_auth.examine==1"  @click="gotoAuth('employee')" class="auth_card">
						<view class="auth_info">
							<image class="auth_icon" src="/static/add.png" mode="" style="height: 45px; width: 45px;">
							</image>
							<view class="auth_info_content">
								<text class="auth_title">添加企业员工</text>
								<text class="auth_instru">添加信息：员工名称和手机号以 职位及</text>
							</view>
						</view>
						<view class="auth_non" >
							<view class="auth_non_state">
								立即添加
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {
		getPersonInfo,
		getCompanyInfo,
		getCompanyStaffInfo
	} from "@/api/user.js"

	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				userInfo:{
					company_auth:{
						// examine
					}
				},
				staffData: [],
				userInfo: null,
				userId: '',
				personData: {},
				personAuth: false,
				personAuthStatus: '',
				companyAuth: false,
				companyAuthStatus: '',
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "身份/公司认证"
			})
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#2D56C5',
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			})
			uni.getStorage({
				key: 'login',
				success: (res) => {
					let userInfo = res.data
					this.userId = userInfo.id
					this.getPersonAuthInfo()
					this.getCompanyAuthInfo()
				}
			})
		},
		onLoad(option) {
			uni.getStorage({
				key: 'login',
				success: (res) => {
					let userInfo = res.data
					this.userId = userInfo.id
					this.userInfo=userInfo
					this.getPersonAuthInfo()
					this.getCompanyAuthInfo()
				}
			})
			const that = this;
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('userInfo', function(data) {
				console.log('页面地址==', data)
				that.userInfo = data.data
				that.getCompanyStaffData()
			})

		},
		methods: {

			gotoAuth(type) {
				const that=this;
				switch (type) {
					case 'person':
						uni.navigateTo({
							url: '/pages/user/auth/authPerson'
						})
						break;
					case 'company':
						uni.navigateTo({
							url: '/pages/user/auth/authCompany'
						})
						break;
					case 'employee':
						uni.navigateTo({
							url: "/pages/user/auth/employee/employee",
							success(res) {
								res.eventChannel.emit('employeeList', {
									data: that.staffData
								})
							}
						})
						break;
				}
			},

			getPersonAuthInfo() {
				getPersonInfo(this.userId)
					.then(res => {

						let data = res.data

						if (data.length == 0) {
							this.personAuth = false
						} else {
							let examine = data.examine
							this.personAuth = true
							if (examine == 0) {
								this.personAuthStatus = '审核中'
							} else if (examine == 1) {
								this.personAuthStatus = '已认证'
							} else if (examine == 2) {
								this.personAuthStatus = '审核失败'
							}
						}
					})
					.catch(e => {
						console.log(e)
					})
			},

			getCompanyAuthInfo() {
				getCompanyInfo(this.userId)
					.then(res => {
						let data = res.data

						if (data.length == 0) {
							this.companyAuth = false
						} else {
							let examine = data.examine
							this.companyAuth = true
							if (examine == 0) {
								this.companyAuthStatus = '审核中'
							} else if (examine == 1) {
								this.companyAuthStatus = '已认证'
							} else if (examine == 2) {
								this.companyAuthStatus = '审核失败'
							}
						}

					})
					.catch(e => {
						console.log(e)
					})
			},
			getCompanyStaffData: function() {
				getCompanyStaffInfo(this.userInfo.id).then(res => {
					this.staffData = res.data
				})
			}

		}
	}
</script>

<style>
	.auth_instru {
		margin-top: 9px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.auth_title {
		font-size: 16px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
	}

	.auth_icon {
		margin-top: 25px;
		margin-left: 35px;
		width: 50px;
		height: 50px;
	}

	.auth_info {
		display: flex;
		flex-direction: row;
	}

	.auth_done {
		flex-direction: row;
		display: flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		padding-bottom: 24px;
	}

	.auth_done_state {
		width: 98px;
		height: 25px;
		background: linear-gradient(258deg, #93B4F6 0%, #CEDDFA 100%);
		opacity: 1;
		border-radius: 0px 0px 0px 7px;
		font-size: 12px;
		display: flex;
		font-family: Alibaba PuHuiTi;
		justify-content: center;
		align-items: center;
	}

	.auth_non {
		margin-top: 10px;
		/* display: flex; */
		/* -webkit-justify-content: center; */
		/* justify-content: center; */
		margin-left: 100px;
		padding-bottom: 12px;
	}

	.auth_non_state {
		width: 87px;
		height: 26px;
		background: #0E59EA;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		opacity: 1;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
	}

	.auth_info_content {
		margin-top: 25px;
		padding-left: 30px;
		margin-right: 60px;
		display: flex;
		flex-direction: column;
	}

	.page_title {
		background-color: #4E6ECC;
	}

	.page_title_text {
		margin-left: 14px;
		margin-right: 14px;
		font-size: 15px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #FFFFFF;
		opacity: 1;
	}

	.content {
		position: absolute;
		background-color: #F2F2F2;
	}

	.auth_list {
		margin-top: -50px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.auth_card {
		margin-top: 6px;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 7px;
		position: relative;
	}

	.auth_card_last {
		margin-bottom: 50px;
	}

	.auth_card-tip {
		position: absolute;
		right: 0;
		bottom: 25px;
		background: linear-gradient(-90deg, #DCE7FC 0%, #EDF3FF 100%);
		padding: 6px 17px;
		border-radius: 0rpx 0rpx 0rpx 7px;
		font-size: 12px;
		font-weight: bold;
	}

	.page-wraper {
		position: absolute;
		top: 0px;
		height: 100%;
		background-color: #F2F2F2;

	}
</style>